當我們會寫基本的 Hello World 之後，就可以開始考慮擴展跟重組我們要撰寫的程式碼了。我們會把一段與其他程式碼基本上相異的，而內部彼此有關聯的程式碼，寫成所謂的元件（component），而撰寫的方式有兩種

撰寫元件的方法：

1. JS function

function Smile(){
    return <div>?</div>;
}

2. ES6 Class

Class Smile extends React.Component {
  render() {
    Return <div>?</div>;
  }
}

同樣的元件帶上不同的資料，使用 Props

知道基本的 Component 的寫法之後，就可以練習
1.去拆解或組合並複用元件
2.重複使用元件並帶入不同資料，使用 Props，像函數傳遞參數

function Greet(props) {
  return <h1>{props.message}, {props.face}</h1>;
}

const element = (
  <div>
    <h1>=== Emoji List and Message ===</h1>
    <Greet message="LOL" face="?" />
    <Greet message="..." face="?" />
    <Greet message="No!" face="?" />
  </div>);
ReactDOM.render(element, document.getElementById('root'));

以下組合例子(裡面使用了map語法，後面會更詳細的說明)

function Greet(props) {
  return <h1>{props.message}, {props.face}</h1>;
}

function Emotions() {
  const emojiList = [{
    message: 'LOL',
    face: "?"
  }, {
    message: 'speechless',
    face: "?"
  }, {
    message: 'Shocked',
    face: "?"
  }]
  return (
    <div>
    <h1>=== Emoji List and Message ===</h1>
      {
        emojiList.map(item=>{
          return <Greet key={item.face} message={item.message} face={item.face} />
        })
      }
  </div>
  )
}

ReactDOM.render(<Emotions />, document.getElementById('root'));

Codepen

注）Props 是唯獨的，像是 Pure function?

什麼是 Pure function?
1.給同樣的輸入，會得到一樣的輸出
2.沒有副作用

如果 props 可以存取，就會產生副作用。在輸出時，「同時」更新了輸入。
更多說明可參考 Eric Elliott 的 Master the JavaScript Interview: What is a Pure Function?

以上今天。

參考資料：
https://zh-hant.reactjs.org/docs/components-and-props.html
Master the JavaScript Interview: What is a Pure Function?